<template>
    <div class="box1" style="width: 100%; height: 100%;">
      <i class="b_t"></i>
      <i class="b_t1"></i>
      <i class="b_l"></i>
      <i class="b_r"></i>
      <i class="b_b"></i>
      <i class="moves1d i_move_t3"></i>
      <i class="moves1b i_move_t1"></i>
      <p class="border_title"><span>{{title}}</span></p>
      <div class="k_main"><slot name="center"></slot></div>
    </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '边框标题'
    }
  },
  data() {
    return {

    }
  }
}
</script>

<style lang="less" scoped>
.box1 { position: relative; width: 24%; padding: 30px 20px 20px; box-sizing: border-box;}
.box1 .b_t{display: block; width: calc(100% - 40px); position: absolute; top: 0px; left: 0; height: 30px; background: url(~@/assets/images/borderBox/box1/border-top.png) repeat-x left top;}
.box1 .b_t1{display: block; width: 40px; position: absolute; top: 0px; right: 0px; height: 30px; background: url(~@/assets/images/borderBox/box1/border-top1.png) repeat-x center top;}
.box1 .b_l{display: block; height: calc(100% - 30px); position: absolute; top: 30px; left: 0px; width: 20px; background: url(~@/assets/images/borderBox/box1/border-left.png) no-repeat center bottom;}
.box1 .b_r{display: block; height: calc(100% - 30px); position: absolute; top: 30px; right: 0px; width: 20px; background: url(~@/assets/images/borderBox/box1/border-right.png) no-repeat center bottom;}
.box1 .b_b{display: block; width: calc(100% - 40px); position: absolute; bottom: 0px; left: 20px; height: 20px; background: url(~@/assets/images/borderBox/box1/border-bottom.png) repeat-x center top;}
.box1 .b_b1{display: block; width: 20px; position: absolute; bottom: 0px; left: 0px; height: 20px; background: url(~@/assets/images/borderBox/box1/border-bottom1.png) no-repeat left top;}
.box1 .border_title { position: absolute; width: 100%; height: 53px; background: url(~@/assets/images/borderBox/box1/border_title.png) no-repeat left center; top: 0; left: 0; line-height: 50px; font-size: 20px; color: #00fffc; z-index: 99; box-sizing: border-box; padding-left: 10px;}
.box1 .border_title span { font-weight: 600; background-image:-webkit-linear-gradient(top,#fff,#61e7ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.box1 .k_main{background: rgba(0, 17, 56, 0.75); width: 100%; height: 100%; position: relative; padding-top: 30px; box-sizing: border-box;}

.moves1a { animation: 2s linear 0s normal infinite running moves1a;}
.moves1b { animation: 2s linear 0s normal infinite running moves1b;}
.moves1c { animation: 2s linear 0s normal infinite running moves1c;}
.moves1d { animation: 2s linear 0s normal infinite running moves1d;}
.i_move_t{width: 90px; height: 18px; background: url(~@/assets/images/borderBox/box1/sy_xl_bg-light.png) no-repeat center center; top: -7px; display:block; position: absolute;}
.i_move_t1{width: 90px; height: 18px; background: url(~@/assets/images/borderBox/box1/sy_xl_bg-light.png) no-repeat center center; top: -30px; right: -45px; transform: rotate(90deg); display:block; position: absolute;}
.i_move_t2{width: 90px; height: 18px; background: url(~@/assets/images/borderBox/box1/sy_xl_bg-light.png) no-repeat center center; bottom: -6px; display:block; position: absolute;}
.i_move_t3{width: 90px; height: 18px; background: url(~@/assets/images/borderBox/box1/sy_xl_bg-light.png) no-repeat center center; bottom: 30px; left: -43px; transform: rotate(90deg); display:block; position: absolute;}

@keyframes moves1a {
  0% {
    left: 0%;
    opacity: 0.6;
  }
  30% {
    left: 30%;
    opacity: 1;
  }
  60% {
    left: 60%;
    opacity: 0.6;
  }
  100% {
    left: calc(100% - 90px);
    opacity: 0;
  }
}
@keyframes moves1b {
  0% {
    top: 0%;
    opacity: 0.4;
  }
  30% {
    top: 30%;
    opacity: 1;
  }
  60% {
    top: 60%;
    opacity: 0.6;
  }
  100% {
    top: calc(100% - 30px);
    opacity: 0;
  }
}
@keyframes moves1c {
  0% {
    right: 0%;
    opacity: 0.6;
  }
  30% {
    right: 30%;
    opacity: 1;
  }
  60% {
    right: 60%;
    opacity: 0.6;
  }
  100% {
    right: calc(100% - 90px);
    opacity: 0;
  }
}
@keyframes moves1d {
  0% {
    bottom: calc(0% + 45px);
    opacity: 0.4;
  }
  30% {
    bottom: 30%;
    opacity: 1;
  }
  60% {
    bottom: 60%;
    opacity: 0.6;
  }
  100% {
    bottom: calc(100% - 30px);
    opacity: 0;
  }
}
</style>